<template>
	<view>
		<view class="handler">
			<u-form :model="form" ref="uForm" :border-bottom="false" label-position="top">
				<u-form-item :border-bottom="false" label="延期原因">
					<view class="num-text">
						<u-input v-model="form.name_remark" type="textarea" border-color="#fff" maxlength="100" placeholder="请输入延期原因" />
						<view class="font-num">0/100</view>
					</view>
				</u-form-item>
				<u-gap height="16" bg-color="#F8F8F8"></u-gap>
				<u-form-item label="截止时间">
					<view class="num-text">
						<u-field
							@click="openTime"
							v-model="form.endDate" 
							:disabled="true"
							label-width="0"
							:border-bottom="false"
							placeholder="请选择"
							right-icon="arrow-down-fill"
						/>
					</view>
					<u-picker v-model="show" mode="time" :mask-close-able="false" @confirm="confirm"></u-picker>
				</u-form-item>
			</u-form>
			<u-gap height="16" bg-color="#F8F8F8"></u-gap>
			<view class="title-box">
				<view class="title-label">
					<view class="label">延期视频</view>
				</view>
				<view class="upload-box">
					<u-upload ref="uUploadVideo" :action="action" max-count="5" upload-text="选择视频"></u-upload>
				</view>
			</view>
			<u-gap height="16" bg-color="#F8F8F8"></u-gap>
			<view class="title-box">
				<view class="title-label">
					<view class="label">延期图片</view>
				</view>
				<view class="upload-box">
					<u-upload ref="uUploadImage" :action="action" max-count="5" upload-text="选择图片"></u-upload>
				</view>
			</view>
			<u-gap height="16" bg-color="#F8F8F8"></u-gap>
		</view>
		<u-row gutter="32" class="bottom-box" justify="center">
			<u-col span="11">
				<view><u-button type="primary" @click="submitForm">提交</u-button></view>
			</u-col>
		</u-row>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					name_remark: '',
					endDate: '',
				},
				action: '',
				show: false,
				id: '',
				tabIndex: ''
			}
		},
		onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
			this.action = this.vuex_config.baseUrl + '/file/upload'
			this.title = option.title
			this.id = option.id
			this.tabIndex = option.tabIndex
			if (this.tabIndex === "1") {
				this.getPatrolInfo() // 巡检详情
			} else if (this.tabIndex === "2") {
				this.getRepairInfo() // 报修详情
			} else {
				this.getReportInfo() // 零散详情
			}
		},
		methods: {
			getPatrolInfo() {
				this.$u.api.patrolIdInfo(this.id).then(res => {
					console.log(res)
					if (res.code === 200) {
						this.form = res.data
					}
				})
			},
			getRepairInfo() {
				this.$u.api.repairInfo(this.id).then(res => {
					console.log(res)
					if (res.code === 200) {
						this.form = res.data
					}
				})
			},
			getReportInfo() {
				this.$u.api.reportInfo(this.id).then(res => {
					console.log(res)
					if (res.code === 200) {
						this.form = res.data
					}
				})
			},
			// 申请延期
			submitForm() {
				if (this.tabIndex === '1') {
					// 巡检延期
					let video = this.$refs.uUploadVideo.lists.map(item => {
						return '/file/download?name=' + item.response.data
					})
					let img = this.$refs.uUploadImage.lists.map(item => {
						return '/file/download?name=' + item.response.data
					})
					let params = {
						id: this.form.id,
						remark: this.form.name_remark,
						endDate: this.form.endDate,
						status3: 0,
						user: this.$store.state.vuex_user.userName,
						video: video.toString(),
						img: img.toString()
					}
					console.log(params)
					this.$u.api.patrolUpdateStatus(params).then(res => {
						if (res.code === 200) {
							uni.navigateTo({
								url: '/pages/common/success?title=延期申请已提交'
							})
						}
					})
				} else if (this.tabIndex === '2') {
					// 设备延期
					let video = this.$refs.uUploadVideo.lists.map(item => {
						return '/file/download?name=' + item.response.data
					})
					let img = this.$refs.uUploadImage.lists.map(item => {
						return '/file/download?name=' + item.response.data
					})
					let params = {
						id: this.form.id,
						remark: this.form.name_remark,
						endDate: this.form.endDate,
						status3: 0,
						user: this.$store.state.vuex_user.userName,
						video: video.toString(),
						img: img.toString()
					}
					this.$u.api.repairUpdateStatus(params).then(res => {
						if (res.code === 200) {
							uni.navigateTo({
								url: '/pages/common/success?title=延期申请已提交'
							})
						}
					})
				} else {
					// 设备延期
					let video = this.$refs.uUploadVideo.lists.map(item => {
						return '/file/download?name=' + item.response.data
					})
					let img = this.$refs.uUploadImage.lists.map(item => {
						return '/file/download?name=' + item.response.data
					})
					let params = {
						id: this.form.id,
						remark: this.form.name_remark,
						endDate: this.form.endDate,
						status3: 0,
						user: this.$store.state.vuex_user.userName,
						video: video.toString(),
						img: img.toString()
					}
					this.$u.api.reportUpdateStatus(params).then(res => {
						if (res.code === 200) {
							uni.navigateTo({
								url: '/pages/common/success?title=延期申请已提交'
							})
						}
					})
				}
			},
			openTime() {
				this.show = true
			},
			confirm({year, month, day}) {
				this.form.endDate = `${year}-${month}-${day}`
			},
			navTo(href) {
				uni.navigateTo({
					url: href
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.handler {
	margin-top: 16rpx;
	background: #fff;
	padding-top: 30rpx;
	overflow-y: scroll;
	.title-box {
		padding: 24rpx 30rpx;
		.title-label {
			display: flex;
			justify-content: space-between;
			image {
				width: 44rpx;
				height: 44rpx;
			}
		}
		.value-txt {
			line-height: 1.5;
		}
		.upload-box {
			::v-deep .u-list-item {
				margin-left: 0;
			}
		}
	}
	.u-form-item {
		padding: 24rpx 30rpx;
	}
	.num-text {
		width: 100%;
		display: flex;
		flex-direction: column;
		.u-field {
			padding: 10rpx 0;
			::v-deep .u-flex {
				margin: 0 !important;
			}
		}
	}
	.font-num {
		text-align: right;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #999999;
		line-height: 1;
		text-align: right;
		font-style: normal;
	}
	::v-deep .u-form-item--left__content__label {
		line-height: 1;
	}
}
</style>
